<template>
  <view class="plan-item">
    <view class="itemTitle">
      <view v-if="taskDetail.isTeam" style="color: #05a47d" class="title">{{
        "(队伍)" + taskDetail.title
      }}</view>
      <view class="title" v-else>{{ taskDetail.title }}</view>

      <image
        v-if="!taskDetail.isMe"
        src="../../static/icons/more.png"
        :class="['moreIcon', showEdit ? 'moreAcive' : '']"
        @click="changeEdit"
      ></image>
    </view>
    <view class="options">
      <van-swipe-cell
        :right-width="taskDetail.isMe ? 40 : 80"
        v-for="(item, index) in taskOptions"
        :key="index"
      >
        <view class="optionItem animate__animated animate__bounceInRight">
          <van-radio-group :value="isCheck(item)">
            <van-radio
              checked-color="#05A47D"
              name="1"
              shape="square"
              icon-size="15"
              label-disabled
            >
              <view class="placeHolder"></view>
              <view
                :class="[
                  'radioContent',
                  item.isFinish ? 'finish' : '',
                  item.isTime && !item.isFinish ? 'finish timeOut' : '',
                ]"
                >{{ item.title }}</view
              >
            </van-radio>
          </van-radio-group>
        </view>
        <view slot="right">
          <view class="operatorBox">
            <view
              v-if="!taskDetail.isMe"
              class="delete operatorItem"
              @click="removeThisTask(item)"
              >删除</view
            >
            <view class="detail operatorItem" @click="skipToUpdateTask(item)"
              >详情</view
            >
          </view>
        </view>
      </van-swipe-cell>
    </view>

    <view :class="['editMenu', showEdit ? 'editMenuActive' : '']">
      <view class="editItem" @click="addTask">添加任务</view>
      <view class="editItem" @click="removeTaskList">删除列表</view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "PlanItem",
  props: {
    taskDetail: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      showEdit: false,
      taskOptions: [],
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    ...mapState("m_task", ["taskList"]),
    // 判断是否已经完成（radio状态）
    isCheck() {
      return (item) => {
        return item && item.isFinish ? "1" : "0";
      };
    },
  },
  mounted() {
    this.getTaskDetailData();
  },
  methods: {
    // 打开编辑框状态
    changeEdit() {
      this.showEdit = !this.showEdit;
    },

    // 获取任务详情列表
    async getTaskDetailData() {
      const tasks = this.taskDetail.tasks,
        listId = this.userInfo.allocTask; // 用于删除分配的任务
      try {
        for (let i = 0; i < tasks.length; i++) {
          const taskId = tasks[i];
          const res = await this.$store.dispatch("m_task/getTaskDetail", {
            taskId,
            listId,
          });
          if (Object.keys(res).length) {
            this.taskOptions.push(res);
          }
        }
      } catch (err) {
        console.log("获取任务详情失败:", err);
      }
    },

    // 删除这个任务
    async removeThisTask(item) {
      const listId = this.taskDetail._id,
        taskId = item._id;
      try {
        uni.showModal({
          title: "删除任务",
          content: "确定要删除这个任务吗?",
          cancelColor: "#aaa",
          confirmColor: "#05A47D",
          success: async (res) => {
            if (res.confirm) {
              await this.$store.dispatch("m_task/deleteTask", {
                listId,
                taskId,
              });
              this.$store.commit("m_task/clearTaskList");
              this.getTaskListData();
              uni.showToast({
                icon: "success",
                title: "删除成功",
              });
            }
          },
        });
      } catch (err) {
        console.log(err);
        uni.showToast({
          icon: "error",
          title: "删除失败",
        });
      }
    },

    // 删除这个任务列表
    async removeTaskList() {
      const listId = this.taskDetail._id,
        taskList = this.taskDetail.tasks,
        isTeam = this.taskDetail.isTeam;
      uni.showModal({
        title: "删除任务列表",
        content: "确定要删除这个列表吗?",
        cancelColor: "#aaa",
        confirmColor: "#05A47D",
        success: async (res) => {
          if (res.confirm) {
            try {
              await this.$store.dispatch("m_task/deleteTaskList", {
                listId,
                taskList,
                isTeam,
              });
              this.$store.commit("m_task/clearTaskList");
              this.getTaskListData();
              uni.showToast({
                icon: "success",
                title: "删除成功",
              });
            } catch (err) {
              console.log("删除失败：", err);
            }
          }
        },
      });
    },

    // 获取任务列表数据(删除一个任务重新获取数据)
    async getTaskListData(page = 0, limitCount = 10) {
      const userId = this.userInfo._openid;
      await this.$store.dispatch("m_task/getTaskList", {
        page,
        limitCount,
        userId,
      });
    },

    // 跳转至添加任务
    addTask() {
      this.showEdit = false;
      uni.navigateTo({
        url: `../../pages/CreatePlanTask/CreatePlanTask?taskId=${this.taskDetail._id}`,
      });
    },

    // 跳转至修改任务
    skipToUpdateTask(item) {
      const teamInfo = {};
      teamInfo.isTeam = this.taskDetail.isTeam;
      if (this.taskDetail.isTeam) {
        teamInfo.teamId = this.taskDetail.teamId;
      }
      item.teamInfo = teamInfo;
      item.isMe = this.taskDetail.isMe;
      uni.navigateTo({
        url: `../../pages/UpdatePlanTask/UpdatePlanTask?taskDetail=${encodeURIComponent(
          JSON.stringify(item)
        )}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.plan-item {
  position: relative;
  padding: 15rpx 10rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.3);
  .itemTitle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    margin-bottom: 20rpx;
    .title {
      width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .moreIcon {
      width: 40rpx;
      height: 40rpx;
      transition: transform 0.5s;
    }
    .moreAcive {
      transform: rotateZ(90deg);
    }
  }
  .options {
    margin: 10rpx;
    .optionItem {
      position: relative;
      width: 100%;
      background-color: rgb(250, 250, 250);
      color: rgb(155, 155, 155);
      box-sizing: border-box;
      font-size: 26rpx;
      margin-bottom: 20rpx;
      .placeHolder {
        position: absolute;
        top: 10rpx;
        left: 0;
        width: 40rpx;
        height: 40rpx;
        z-index: 10;
      }
      .radioContent {
        width: 250rpx;
        padding: 10rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .finish {
        text-decoration: line-through;
      }
      .timeOut {
        color: red;
      }
    }
    .operatorBox {
      display: flex;
      height: 100%;
      color: #fff;
      .operatorItem {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12rpx 14rpx;
        height: 100%;
        font-size: 26rpx;
      }
      .delete {
        background-color: #bbb;
      }
      .detail {
        background-color: #05a47d;
      }
    }
  }

  .editMenu {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    position: absolute;
    box-sizing: border-box;
    padding: 10rpx 20rpx;
    right: 40rpx;
    top: 60rpx;
    z-index: 100;
    width: 170rpx;
    height: 140rpx;
    border-radius: 10rpx;
    box-shadow: 10rpx 10rpx 20rpx whitesmoke;
    background-color: #fff;
    font-size: 30rpx;
    transform: scale(0);
    transition: transform 0.5s;
  }
  .editMenuActive {
    transform: scale(1);
  }
}
</style>
